<template>
  <n-modal v-model:show="isVisible" title="编辑物流订单" preset="dialog" @close="onClose" @update:show="onClose"
           style="height: 415px;width: 700px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px;margin-left: 20px">
        <n-form-item label="客户订单编号：" path="customerOrderId">
          <n-input v-model:value="form.customerOrderId" placeholder="请输入客户订单编号"/>
        </n-form-item>
        <n-form-item label="物流费用：" path="price" style="margin-left: 20px">
          <n-input v-model:value="form.price" placeholder="请输入物流费用" style="width: 180px"/>
        </n-form-item>
        <n-form-item label="联系电话：" path="phone" style="margin-left: 20px">
          <n-input v-model:value="form.phone" placeholder="请输入联系电话" style="width: 180px"/>
        </n-form-item>
      </div>

      <div class="form-row">
        <n-form-item label="运输状态：" path="status" style="margin-left: 20px">
          <n-select v-model:value="form.status"
                    placeholder="请选择运输状态"
                    filterable
                    clearable
                    :options="statusOptions"
                    style="width: 180px"
                    disabled
          ></n-select>
        </n-form-item>
        <n-form-item label="配送方式：" path="logisticsChannels" style="margin-left: 20px">
          <n-select v-model:value="form.logisticsChannels"
                    placeholder="请选择配送方式"
                    filterable
                    clearable
                    :options="logisticsChannels"
                    style="width: 180px"
          ></n-select>
        </n-form-item>
        <n-form-item label="物流商：" path="name" style="margin-left: 20px">
          <n-select v-model:value="form.name"
                    placeholder="请选择物流商"
                    filterable
                    clearable
                    :options="logistics"
                    style="width: 180px"
          ></n-select>
        </n-form-item>
      </div>
      <div style="display: flex">
        <n-form-item label="开始时间：" path="sTime" style="margin-left: 20px">
          <n-date-picker
              v-model:formatted-value="sTime"
              placeholder="请选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 280px;"
          />
        </n-form-item>
        <n-form-item label="结束时间：" path="eTime" style="margin-left: 20px">
          <n-date-picker
              v-model:formatted-value="eTime"
              placeholder="请选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 280px"
          />
        </n-form-item>
      </div>
      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>

import {onMounted, ref, watch} from 'vue';
import {useRouter} from 'vue-router';
import {useUserStore} from "@/store/index.js";
import api from '@/api/admin'
import {List} from "echarts";

const loading = ref(true)
const userStore = useUserStore()
const id = userStore.getId();
const router = useRouter()
const products = ref([])
const stores = ref([])
const admins = ref([])
const emit = defineEmits(['updatePage'])
const props = defineProps({
  show1: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
  },
  option: {
    type: List,
    require: true
  },
  statusOptions: {
    type: Array,
    require: true
  },
  logisticsChannels: {
    type: Array,
    require: true
  },
  logistics: {
    type: Array,
    require: true
  },
  attribute: {
    type: Object,
    required: true,
  }
});

const sTime = ref(null)
const eTime = ref(null)
const isVisible = ref(props.show1);
watch(() => props.show1, (newVal) => {
  isVisible.value = newVal;
  if (newVal) {
    // 当对话框显示时，将传递过来的属性值填充到表单中
    form.value = {...props.attribute};
    sTime.value = props.attribute.startTime;
    eTime.value = props.attribute.endTime;
  }
});

const form = ref({
  customerOrderId: '',
  price: '',
  phone: '',
  status: '',
  logisticsChannels: '',
  name: '',
});
const startTime = ref(null)
const endTime = ref(null)

const handleSubmit = async () => {
  try {
    const startTime = sTime.value.toString()
    const endTime = eTime.value.toString()
    const res = await api.updateLogisticsProviderOrder(
        {
          ...form.value,
          adminId: id,
          startTime: startTime,
          endTime: endTime
        }
    )
    if (res.code === 200) {
      emit("updatePage")
    } else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("修改物流订单失败！")
  } finally {
    clear()
    props.onClose();
  }
};

const queryAdminList = async () => {
  loading.value = true
  try {
    const res = await api.findAllAdmin()
    if (res.code === 200) {
      res.data.map((item) => {
        admins.value.push({
          label: item.name,
          value: item.id
        })
      })
    } else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("获取管理员信息失败！")
  } finally {
    loading.value = false
  }
}
const queryStoreList = async () => {
  loading.value = true
  try {
    const res = await api.findAllStore()
    if (res.code === 200) {
      res.data.map((item) => {
        stores.value.push({
          label: item.name,
          value: item.id
        })
      })
    } else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("获取仓库信息失败！")
  } finally {
    loading.value = false
  }
}
const queryProductList = async () => {
  loading.value = true
  try {
    const res = await api.findAllProduct()
    if (res.code === 200) {
      res.data.map((item) => {
        products.value.push({
          label: item.name,
          value: item.id
        })
      })
    } else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("获取产品信息失败！")
  } finally {
    loading.value = false
  }
}
const clear = () => {
  form.value.customerOrderId = null
  form.value.phone = ""
  form.value.name = ""
  form.value.price = ""
  form.value.status = ""
  form.value.logisticsChannels = ""
  startTime.value = null
  endTime.value = null

}
onMounted(() => {
  queryStoreList()
  queryAdminList()
  queryProductList()
})
</script>
<style scoped>
.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.form-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.form-row > n-form-item {
  flex: 1;
}

.submit-row {
  justify-content: center;
  display: flex;
  width: 100%;
}
</style>
